import { Card, Button, Descriptions, Badge } from "antd";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getBaseHospitalInfo } from "@/api/hospital/hospitalList";
import {
  ContentItem,
  BookingRule,
} from "@/api/hospital/hospitalList/model/types";

export default function BaseHospitalInfo() {
  const navigate = useNavigate();

  const params = useParams();
  const { id } = params;

  const [hospitalInfo, setHospitalInfo] = useState<ContentItem>();
  const [bookingRule, setBookingRule] = useState<BookingRule>();

  const getBaseHospitalInfoFun = async () => {
    const res = await getBaseHospitalInfo(id as string);
    setHospitalInfo(res.hospital);
    setBookingRule(res.bookingRule);
  };

  useEffect(() => {
    getBaseHospitalInfoFun();
  }, []);

  return (
    <>
      <Card>
        <Descriptions title="借本信息" bordered column={3}>
          <Descriptions.Item label="医院名称">
            {hospitalInfo?.hosname}
          </Descriptions.Item>
          <Descriptions.Item label="医院logo" span={2}>
            <img
              style={{ width: 150 }}
              src={
                hospitalInfo?.logoData
                  ? "data:image/png;base64," + hospitalInfo.logoData
                  : ""
              }
              alt=""
            />
          </Descriptions.Item>
          <Descriptions.Item label="医院编码">
            {hospitalInfo?.hoscode}
          </Descriptions.Item>
          <Descriptions.Item label="医院地址" span={2}>
            {hospitalInfo?.param.fullAddress}
          </Descriptions.Item>
          <Descriptions.Item label="坐车路线" span={3}>
            {hospitalInfo?.route}
          </Descriptions.Item>
          <Descriptions.Item label="医院简介">
            {hospitalInfo?.intro}
          </Descriptions.Item>
        </Descriptions>

        <Descriptions title="预约规则信息" bordered column={3}>
          <Descriptions.Item label="预约周期">
            {bookingRule?.cycle + "天"}
          </Descriptions.Item>
          <Descriptions.Item label="放号时间" span={2}>
            {bookingRule?.releaseTime}
          </Descriptions.Item>
          <Descriptions.Item label="停挂时间">
            {bookingRule?.stopTime}
          </Descriptions.Item>
          <Descriptions.Item label="退号时间" span={2}>
            {bookingRule?.quitTime}
          </Descriptions.Item>
          <Descriptions.Item label="预约规则" span={3}>
            {bookingRule?.rule.map((item) => {
              return (
                <>
                  {item}
                  <br />
                </>
              );
            })}
          </Descriptions.Item>
        </Descriptions>

        <Button
          style={{ marginTop: 20 }}
          onClick={() => {
            navigate(-1);
          }}
        >
          返回
        </Button>
      </Card>
    </>
  );
}
